<template>
  <a-button type="primary" size="middle" @click="add">新建</a-button>
  <a-table :columns="columns" :dataSource="seats" bordered>
    <template #action="{ record }">
      <a-space>
        <a-button @click="modify(record)">修改</a-button>
        <a-button danger @click="remove(record)">删除</a-button>
      </a-space>
    </template>
  </a-table>
  <a-modal
      destroyOnClose
      v-model:open="isModalVisible"
      :title="modalTitle"
      @ok="save"
      @cancel="cancel"
      :okText="'确定'"
      :cancelText="'取消'"
  >
    <a-form
        :model="form"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        ref="formRef"
    >
      <a-form-item label="名称" name="name">
        <a-input
            v-model:value="form.name"
            placeholder="请输入 名称"
        ></a-input>
      </a-form-item>
      <a-form-item label="通道" name="channel">
        <a-select v-model:value="form.channel" placeholder="请选择通道">
          <a-select-option v-for="item in channels" :key="item" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="职能" name="function">
        <a-select v-model:value="form.function" placeholder="请选择职能">
          <a-select-option v-for="item in functions" :key="item" :value="item"
          >{{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
          label="IP地址"
          name="ip"
          :rules="[{ required: true, message: '请输入IP地址!' }]"
      >
        <a-input v-model:value="form.ip" placeholder="请输入IP地址"></a-input>
      </a-form-item>
      <a-form-item
          label="分机号"
          name="extension"
          :rules="[{ required: true, message: '请输入分机号!' }]"
      >
        <a-input v-model:value="form.extension" placeholder="请输入分机号"/>
      </a-form-item>
      <a-form-item label="队列号" name="queue">
        <a-input
            v-model:value="form.queue"
            placeholder="请输入队列号"
        ></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import {ref} from "vue";
import {message} from "ant-design-vue";

// region 表格
const columns = [
  {
    title: "名称",
    dataIndex: "name",
    sorter: {
      compare: (a, b) => a.name - b.name,
      multiple: 1,
    },
  },
  {
    title: "通道",
    dataIndex: "channel",
    sorter: {
      compare: (a, b) => a.channel - b.channel,
      multiple: 3,
    },
  },
  {
    title: "职能",
    dataIndex: "function",
    sorter: {
      compare: (a, b) => a.function - b.function,
      multiple: 2,
    },
  },
  {title: "IP地址", dataIndex: "ip"},
  {title: "分机号", dataIndex: "extension"},
  {title: "队列号", dataIndex: "queue"},
  {title: "操作", key: "operation", slots: {customRender: "action"}},
];

let seats = ref([]);
// endregion

// region 弹窗
const modalTitle = ref("");
const isModalVisible = ref(false);
const add = () => {
  modalTitle.value = "新建";
  isModalVisible.value = true;
};
const modify = (params) => {
  modalTitle.value = "修改";
  isModalVisible.value = true;
  form.value = {...params};
};
const remove = (params) => {
  seats.value = seats.value.filter((item) => item.id !== params.id);
  message.error("删除成功");
};
// endregion

// region 表单操作
const form = ref({
  name: "",
  channel: 1,
  function: "全部",
  ip: "",
  extension: "",
  queue: "",
});
const channels = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const functions = [
  "全部",
  "类型1",
  "类型2",
  "类型3",
  "类型4",
  "类型5",
];
const formRef = ref();
const initForm = () => {
  form.value = {
    id: "",
    name: "",
    channel: 1,
    function: "全部",
    ip: "",
    extension: "",
    queue: "",
  };
};
let idKey = ref(1);
const save = () => {
  formRef.value.validate().then(() => {
    if (modalTitle.value === "新建") {
      form.value.id = idKey.value++;
      seats.value.push({...form.value});
    } else {
      seats.value = seats.value.map((item) => {
        if (item.id === form.value.id) {
          return form.value;
        }
        return item;
      });
    }
    initForm();
    isModalVisible.value = false;
    message.success("保存成功");
  });
};
const cancel = () => {
  initForm();
  isModalVisible.value = false;
};
// endregion
</script>

<style scoped></style>
